<template>
	<div class="tabberWarp" >
		<div class="warp">
			<Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes' :sel='selected' :key="item.txt">
				<img :src="item.normalImg" slot='normalImg'>
				<img :src="item.activeImg" slot='activeImg'>
			</Item>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Item from './Item.vue'
	export default {
		components:{
			Item
		},
		data:function(){
			return{
				selected:'home',
				tabbarDes:[
					{
						txt:'首页',
						page:'home',
						normalImg:require('../assets/img/footer/home.png'),
						activeImg:require('../assets/img/footer/shome.png')
						
					},				
					{
						txt:'分类',
						page:'classify',
						normalImg:require('../assets/img/footer/classify.png'),
						activeImg:require('../assets/img/footer/sclassify.png')
					},
					{
						txt:'消息',
						page:"home",
						normalImg:require('../assets/img/footer/message.png'),
						activeImg:require('../assets/img/footer/message.png')
					},
					{
						txt:'购物车',
						page:'cart',
						normalImg:require('../assets/img/footer/cart.png'),
						activeImg:require('../assets/img/footer/cart.png')
					},
					{
						txt:'个人',
						page:'mine',
						normalImg:require('../assets/img/footer/mine.png'),
						activeImg:require('../assets/img/footer/smine.png')
					}
				],
			}
		},
		methods:{
			getVal:function(res){
				this.selected = res;
				this.tabbarDes[2].page=this.selected;	
			}
		},
		created(){
			let arr=["home","classify","cart","mine"]
			if(arr.includes(this.$route.name)){
				this.selected=this.$route.name;
			}
		},
		}
</script>
<style type="text/css">
	.warp{
		width: 100%;
		border-top: 1px solid #eee;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 0;
	}
	.warp img{
		width: 20px;
		height: 20px;
	}
	.tabberWarp img{
		width:28px;
		margin-top: 10px;
		margin-bottom: 5px;
 
	}
	.tabberWarp{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding-bottom: 5px;
		background: #fff;
	}
</style>